<template>
	<view> 
		<view class="flex fixed_top" :style="'background:'+(topFixed?'#f57229':'none')">
			<view class="fixed_topFl"> 
				 <text>休闲娱乐</text>
			</view>
			<view class="fixed_topFr">
				<text class="iconfont icon-sousuo1"></text>
				<lang keywords="养生放松好去处"></lang>
			</view>
		</view>
		
		<view>
			<view class="nav_wrap">
				 <swiper  class="swiper swiper-type swiper-nav"  :indicator-dots="pageinfo.second_category.length >10?true:false"  indicator-color="#eaeaea" indicator-active-color="#FF6000" :style="sliderH">
				 	<swiper-item v-for="(sliderItem, index) in slider" :key="index" @tap="goUrlPage(item.url)">
				 		<view class="type-list clearfix">
				 			<view class="item" v-for="item in sliderItem" :key="">
				 				<image :src="item.pic" :lazy-load="true" style="width: 49px; height: 49px;"></image>
				 				<view class="desc">{{ item.cat_name }}</view>  
				 			</view> 
				 		</view>
				 	</swiper-item>
				 </swiper>
			</view>
		</view>
	
	    <!-- 小图轮播 -->
		<view class="uni-padding-wrap sm_banner"  :style="slider_top">
			<view class="page-section swiper" >
				<view class="page-section-spacing" >
					<swiper class="swiper" :indicator-dots="pageinfo.middle_adv.length >1?true:false" indicator-color="#f9d5b5" indicator-active-color="#ffffff" :autoplay="true" :interval="5000" :duration="500" style=" height: 110px;">
						<swiper-item v-for="(item,index) in pageinfo.middle_adv" :key="index" @tap="goUrlPage(item.url)"  >
							<image :src="item.pic" style="width: 100%; height: 110px; border-radius: 10rpx;"></image>
						</swiper-item> 
					</swiper>
				</view>
			</view>
		</view>
		<!-- 小图轮播 end -->
		
		<!-- 精选热卖 -->
		<view class="uni-padding-wrap hot-shop" v-if="hot_goodsGroup_listArr&& hot_goodsGroup_listArr.length>0">
			<view class="til_h">
				<text class="til_big">精选热卖</text>
				<text class="til_sm">好货值得买</text>
			</view>
			<view class="page-section swiper" >
				<view class="page-section-spacing" >
					<swiper class="swiper" :indicator-dots="true" indicator-color="#d5d5d5" indicator-active-color="#f99530" :interval="5000" :duration="500" style=" height: 220px;">
						<swiper-item  class="flex " v-for="(group_listItem,index) in hot_goodsGroup_listArr">
							<view class="hot-shopBlock" v-for="(item,index) in group_listItem" :key="item.group_id"  @tap="goUrlPage(item.detail_url)" > 
								<view class="hot-shopImg">
									<text class="hot-distance">{{ item.juli_txt}}</text>
									<image :src="item.list_pic" mode="aspectFill" style="  height: 90px;"></image>
								    <text class="hot-sales">已售{{ item.sale_count}}份</text>
								</view>
								<view class="hot-shopTxt">
									<view class="hot-shopTxttil1 over_p">{{ item.merchant_name}}</view>
									<view class="hot-shopTxttil2 over_p">{{ item.group_name}} </view>
									<view class="hot-shopTxtPrice"><text>{{ item.price}}</text>元</view>
									<view class="hot-shopTxtSm"><text class="xian_time" v-if="(item.price-item.old_price)>item.old_price/2">限时特卖</text><text class="old_price">{{ item.old_price}}元</text></view>
								</view> 
							</view> 
						</swiper-item> 
					</swiper>
				</view>
			</view>
		</view>
		<!-- 精选热卖 end --> 
		<!--  --> 
		 <scroll-view :class="'scroll_nav scroll-view_H NavTop '+(NavTop?'NavTopFixed':'')" scroll-x="true" @scroll="scroll" scroll-left="120" > 
				<view :class="GroupArrIndex == index?'active':'' " v-for="(item,index) in groupArr" :key="" @click.stop="changeClass(item.cat_url,index)">{{ item.cat_name }}</view>
		 </scroll-view> 
		<!-- end -->
		<scroll-view scroll-y="true" @scroll="scrollList" id="listView">
			<view class="flex pro-block" v-for="(item,index) in group_list" :key="" @tap="goUrlPage(item.url)">
				<view class="pro-img">
					<image :src="item.pic_info" mode="aspectFill"></image> 
				</view>
				<view class="pro-text">
					<view class="pro-textH">{{ item.store_name }}</view>
					<view> 
						<text class="iconfont icon-star" style="color: #ffc900;"></text>
						<text class="score">{{item.score}}</text> 
					</view>
					<view class="flex" style="justify-content:space-between">
						<text class="pro_type">{{ item.area_name }}</text> 
						<text> {{ item.range_txt }}</text>
					</view>
					<view class="border_b" v-if="item.discount_str">
						<text> {{ item.discount_str }}</text> 
					</view> 
					<view class="info" v-for="(jitem,index) in item.group_list"> 
						<text  class="pin_tuan" v-if="jitem.pin_num > 0">拼</text>
						<text  class="pin_tuan" v-else>团</text>
						<text class="price">￥{{ jitem.price }}</text>
						<text class="price—old">￥{{ jitem.old_price }}</text>
						<text class="detailsInfo">{{ jitem.group_name }}</text>
					</view>  
				</view>
			</view>
			<view v-if='noData' class="no_tips">{{ noDataTip }}</view>
		</scroll-view> 
	</view>
</template>

<script>
	import common from "../../utils/common.js"
	var _this,selectBtArrHd
	var app = getApp()
	var systemInfo = wx.getSystemInfoSync();
	export default{
		data(){
			return{
				pageinfo:'',
				slider:[],
				topFixed:false,
				NavTop:false,
				sliderH:'',
				slider_top:'' ,
				hot_goodsGroup_listArr:[],
				groupArr:[],
				group_list:[],
				GroupArrIndex:0,
				long:'',
				lat:'',
				page:1,
				cat_url:'',
				isHas:true, 
				noData:true,
				noDataTip:'',
			   }
			},
			onHide: function () {// 页面隐藏
			},
			onShow: function () {// 页面显示
			},
			onReady: function () {// 页面渲染完成
			},
			onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数
			   _this = this
			   _this.initData();
			   // _this.cat_url = options.cat_url
			   _this.cat_url = 'meishi'
			   _this.ajaxListData(_this.cat_url); 
			   
			},
			components: {},
			props: {},
			created() { 
				_this = this;
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_this.lat = res.latitude
						_this.long = res.longitude 
				    }
				}); 
			},
			methods:{
				goUrlPage:function(option){
					common.parseUrl(option);
				},
				initData(){
					common.post('Group&a=store_first_cate',{cat_url:'meishi'}, data => {     
						console.log(data,'datadatadata') 
						_this.pageinfo = data
						var slider = [];
						var sliderH = 'height:calc(268rpx + 46px);';
						var slider_top='margin-top:calc(140rpx + 46px);'
						var n
						if(data.second_category){
							n = parseInt(data.second_category.length / 10); 
						} 
						
						if(data.second_category&&data.second_category.length <=5){
							 slider_top='margin-top:calc(0rpx + 46px);' 
						} 
						if (n == 0) {
							slider[0] = data.second_category.slice(0);
						} else { 
							for (var i = 0; i < n; i++) {
								slider[i] = data.second_category.slice(i * 10, (i + 1) * 10); 
								if (i + 1 == n && n * 10 < data.second_category.length) {
									slider[n] = data.second_category.slice(n * 10);
								}
							}
						} 
						
						if (data.second_category.length == 0) {
							sliderH = 'height:0;padding-top:0;';
						} else if (data.second_category.length <= 5) {
							sliderH = 'height:calc(154rpx + 17px);';
						} else if (data.second_category.length <= 10) {
							sliderH = 'height:calc(248rpx + 34px);';
						} 
							
						_this.slider =slider
						_this.sliderH =sliderH 
						_this.slider_top = slider_top
						
						// 热卖 
						var hot_goodsGroup_listArr=[]
						var j = parseInt(data.hot_goods.group_list.length / 3); 
						 
						if (j == 0) {
						 	hot_goodsGroup_listArr[0] = data.hot_goods.group_list.slice(0);
						} else { 
						 	for (var k = 0; k < j; k++) {
						 		hot_goodsGroup_listArr[k] = data.hot_goods.group_list.slice(k * 3, (k + 1) * 3); 
						 		if (k + 1 == j && j * 10 < data.hot_goods.group_list.length) {
						 			hot_goodsGroup_listArr[j] = data.hot_goods.group_list.slice(j * 10);
						 		}
						 	}
						}  
						_this.hot_goodsGroup_listArr = hot_goodsGroup_listArr
						
						//推荐分类 
						var groupArr = data.second_category.slice(0,3)  
						console.log(data.second_category.slice(0,3)) 
						groupArr.unshift({
							 cat_name:'全部推荐',
							 cat_url:''
						 }) 
						 _this.groupArr = groupArr 
						  
					})
				},
				ajaxListData:function(option){
					var param={
						cat_url:option,
						area_url:'',
						sort_id:'juli',
						// lat: _this.lat,
						// long: _this.long, 
						lat: '31.826578',
						long: '117.233443', 
						page:_this.page 
					}
					common.post('Group&a=ajaxList',param, data => { 
						_this.group_list = data.store_list
						
						if(data.store_list.length<10){
							_this.isHas = false 
							_this.noData = true
							if(_this.group_list.length == 0){
								_this.noDataTip = '暂无数据'
							}else{
								_this.noDataTip = '别拉了，没有啦！' 
							} 
						}  
						if(_this.isHas == true){
							_this.page++
						}
						
					}) 
				},
				changeClass:function(option,index){
					_this.GroupArrIndex = index
					_this.ajaxListData(option)
					
				},
				onPageScroll:function(e){    
					if(e.scrollTop >10){  
						this.topFixed = true
					}else{ 
						this.topFixed = false
					}
					
					const query = uni.createSelectorQuery().in(this);
					query.select('#listView').boundingClientRect(data => { 
					  if(data.top <=50){
					  	this.NavTop = true
					  }else{ 
					  	this.NavTop = false
					  }  
					 
					}).exec();
					 
					 
				},
			    scroll: function(e) {
					 console.log(e) 
				},
				// 页面跳转
				goUrl: function(e) { 
					if (e.type == 'submit') {
						common.upFormid(e);
					} 
					if (e.currentTarget.dataset.goodsid) {
						// 超值抢购商品点击上报
						goodsReport(e.currentTarget.dataset.goodsid);
					}
				
					var nums = e.currentTarget.dataset.nums;
					var pageTitle = e.currentTarget.dataset.url_title ? e.currentTarget.dataset.url_title : '';
					var url = e.currentTarget.dataset.url;
				
					if (nums) {
						common.post('Login&a=house_adver_click',{adver_id: nums},function(e) {
							common.parseUrl(url, '', false, pageTitle);
						});
					} else if (url.indexOf('/pages') != -1) {
						wx.navigateTo({url})
					} else {
						common.parseUrl(url, '', false, pageTitle);
					}
				
					 
				},
			}
	} 
</script>

<style>
	.scroll_nav{
		height: 41px;
		overflow-x: scroll;
		white-space: nowrap; 
	}
	.scroll_nav view{
		width: 25%;
		display: inline-block;
		padding: 10px 0;
		text-align: center; 
	}
	.scroll_nav view.active{
		color: #ef8c35;
	}
	.NavTop.NavTopFixed{
		position: fixed;
		top:50px;
		left: 0;
		width: 100%;
		background: #fff;
		margin: 0;
		z-index: 999999; 
	} 
	.NavTop{
		/* margin:30px 10px 10px  10px; */
		justify-content:space-between; 
	}
	.NavTop .cur{
		border-bottom: 2px;
		color: #ef8c35;
	}
	.pro-block{
		padding:15px 10px;
		background: #fff;
		position:relative;
		margin: 0 10px;
	}
	.activity_rg{
		position: absolute;
		right: 0; 
	}
	
	.pro-block .pro-img{
		margin-right: 15px;
	}
	.pro-block .pro-img,.pro-block .pro-img image{
		width: 85px;
		height: 60px;
		position: relative;
	}
	.pro-block .pro-img .renzhengEd{
		position: absolute;
		right: 0;
		top: 0;
		background: #ffce59;
		color: #ec6739;
		font-size: 10px;
		padding: 0 2px;
		font-weight: 700;
	}
	.pro-block .pro-textH{
		font-size: 15px;
		padding-bottom: 5px;
		font-weight: 700;
	}
	.pro-block .pro-text{
		width: 100%;
	}
	.pro-block .pro-text .border_b text{
		color:#ec6739;
		background: #faf2ef;
		font-size: 12px;
		margin:5px 10px 0px 0;
		padding: 2px 4px;
		border: 1px solid #fddcca;
		display: inline-block;
	}
	.pro-block .pro-text  .info{
		font-size: 13px;
		color: #999;
		margin-top: 10px;
	}
	.pro-block .pro-text  .info .price-old{
		margin-right: 10px;
		text-decoration: line-through;
	}
	.pro-block .pro-text .pro_type{
		color:#999;
		font-size: 13px;
	}
	
	.pro-block .score{
		margin-right: 10px;
	}
	/* 一行 */
	.over_p{
		overflow: hidden;/*超出部分隐藏*/
		white-space: nowrap;/*不换行*/
		text-overflow:ellipsis;/*超出部分文字以...显示*/
	}
	.hot-shopTxtSm .old_price{
		text-decoration: line-through;
		color: #999;
		font-size: 12px;
	}
	.hot-shopTxtSm .xian_time{
		border:1px solid #ef8c35;
		color: #ef8c35;
		font-size: 10px;
	}
	.hot-shopBlock .hot-shopTxtPrice{
		color: #ef8c35; 
	}
	.hot-shopBlock .hot-shopTxtPrice text{
		font-size: 16px;
	} 
	.hot-shopBlock .hot-shopTxttil2{
		font-size: 13px;
		color: #333;
		font-weight: bold;
	}  
	.hot-shopBlock .hot-shopTxttil1{
		color: #555;
		font-size: 12px;
	}
	.hot-shopBlock{
		padding: 5px;
		box-sizing: border-box;
		width:33.3%;
	}
	.hot-shopImg{
		width: 100%;
		position: relative; 
	}
	.hot-shopImg image{
		width: 100%; 
		border-radius: 4px;
	}
	.hot-shopImg .hot-sales{
		padding: 2px 4px;
		position: absolute;
		left: 0;
		bottom: 4px;
		padding: 2px 5px;
		color: #fff;
		font-size: 12px;
		background-image: linear-gradient(to right, #f4b043 , #ef8c35);
		border-radius:0 4px 0 4px;
	}
	.hot-shopImg .hot-distance{
		position: absolute;
		top: 5px;
		right: 5px;
		z-index: 9;
		padding: 2px 4px;
		background-color: rgba(0,0,0,0.5); 
		width: auto;
		color: #fff;
		font-size: 12px;
		border-radius: 8px;
	}
	.hot-shop{
		background: #fff;
		margin: 10px;
		padding: 5px;
	}
    .til_h{
		padding-bottom: 20px;
	}
   .til_h .til_sm{
	   font-size: 14px;
	   color: #666;
	   margin-left: 10px;
   }
   .til_h .til_big{
	   font-size: 20px;
   }
	.sm_banner{
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	page{
		background: #f3f3f3; 
	}
	.flex{ 
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap
	}
	.fixed_top{
		width: 100%;
		position: fixed;
		left: 0;
		top:0;
		padding: 10px;
		z-index: 999999; 
		justify-content:space-between;
	}
	.fixed_topFr{
		width: 60%; 
		background: rgba(255,255,255,0.3); 
		height: 28px;
		line-height: 28px;
		border-radius: 20px;
		color: #ef8e38;
		padding-left: 10px;
		margin: 0 25px;
	}
	.swiper-nav{
		background: #fff;
		padding: 20px 0 10px 0; 
	}
	.type-list .item{
	    width: 20%;
	    float: left;
	    text-align: center;
	    padding-bottom: 11px;
	    position: relative;
	    margin-top: 5px;
	}
	.type-list .item .desc{
		word-break:keep-all;/* 不换行 */
		white-space:nowrap;/* 不换行 */
		overflow:hidden;
		text-overflow:ellipsis;
		font-size: 14px;
	}
	.swiper-nav .uni-swiper-dots .uni-swiper-dot{
		width: 20px!important;
		height: 4px;
	}
	.nav_wrap{
		background-image: linear-gradient(to right, #f4b043 , #ef8c35);
		padding: 15px;
		min-height: 140px;
		position: relative; 
	}
	.swiper-nav{
		position: absolute;
		left: 10px;
		top:60px;
		z-index: 999;
		width: calc(100% - 20px);
		border-radius: 10px; 
	}
	.fixed_topFl text{
		padding-left: 30px;
		position: relative;
		display: inline-block;
		line-height: 30px;
		color: #fff;
		font-size: 14px;
	}
	.fixed_topFl text:before{
		position: absolute;
		left: 0;
		top:0;
		content: '';
		width: 20px;
		height: 30px;
		background: url(../../static/images/goleft.png) left center no-repeat;
		background-size: 40px auto; 
	}
	.pin_tuan{
		color: #fff;
		background: #ec6739;
		padding: 2px;
	}
	.no_tips{
		text-align: center; 
		display: block; 
		margin: 30px auto;
		color: #666;
	} 
</style>
